<template>

      <mu-drawer :open="open" :docked="docked" @close="handleClose()" class="app-drawer">
          <mu-appbar class="exmaples-nav-appbar" :zDepth="0">
            <a class="exmaples-appbar-title" @click="handleMenuChange('#/mysql')" href="#/index" style="display:inline-block;">Paas</a>
            <mu-badge content="beta" class="exmaples-version" secondary/>
          </mu-appbar>

          <mu-divider/>

          <mu-list @change="handleMenuChange" :value="menuVal">

            <mu-list-item title="产品服务" toggleNested>
              <mu-list-item value="#/mysql" slot="nested" title="Mysql">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
              <mu-list-item value="#/redis" slot="nested" title="Redis">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
              <mu-list-item value="#/mongodb" slot="nested" title="Mongodb">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
              <mu-list-item value="#/oss" slot="nested" title="OSS">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
            </mu-list-item>

            <mu-list-item title="用户中心" toggleNested>
              <mu-list-item value="#/install" slot="nested" title="个人资料">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
              <mu-list-item value="#/usage" slot="nested" title="用户协议">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
              <mu-list-item value="#/usage" slot="nested" title="我的订单">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
            </mu-list-item>

          </mu-list>

          <mu-divider />

          <mu-list>
            <mu-list-item title="更多信息" toggleNested>
              <mu-list-item value="#/install" slot="nested" title="更新日志">
                <mu-icon slot="left" value="inbox"/>
              </mu-list-item>
              <mu-list-item value="#/usage" slot="nested" title="文档说明">
                <mu-icon slot="left" value="grade"/>
              </mu-list-item>
              <mu-list-item value="#/usage" slot="nested" title="贡献指南">
                <mu-icon slot="left" value="send"/>
              </mu-list-item>
            </mu-list-item>
          </mu-list>
      </mu-drawer>

</template>
<style>

  .mu-drawer{
    background-color:#424242 !important;
  }

  .mu-drawer .mu-item{
    color: #fff !important;
  }

  .exmaples-nav-appbar.mu-appbar {
    background-color: #424242;
    color: rgba(0,0,0,.54);
  }

  .mu-item.selected .mu-item-title{
    color: #03a9f4 !important;
  }

</style>
<script>

    export default{
        props: {
          open: {
            type: Boolean,
            default: true
          },
          docked: {
            type: Boolean,
            default: true
          }
        },
        data () {
          return {
            menuVal: window.location.hash
          }
        },
        methods: {
          handleMenuChange (val) {

//            console.log(val);

            this.menuVal = val
            if (this.docked) {
               window.location.hash = this.menuVal
            } else {
               this.changeHref = true
            }
//            this.$emit('change', val)
          },
          handleClose () {
            this.$emit('close')
          }
        },
        components:{

        }
    }
</script>
